<script setup>
import { ref } from 'vue'
const Moretags=ref(['小剧场','番剧','动物','旅游','公益','亲子','三农','健身','手工','绘画','汽车','超高清','户外潮流','时尚美妆','vlog'])
</script>
<template>
<div class="category-card-container">
  <div class="category-card">
      <div class="category-card-item" v-for="item in Moretags" :key="item">{{ item }}</div>
  </div>
</div>
</template>
<style scoped>
.category-card-container{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: auto;
}
.category-card{
  width: 90%;
  height: 90%;
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(50px,1fr));
  grid-auto-rows: 30px;
  grid-gap: 8px;
  column-gap: 10px;
  justify-items: start;
  align-items: center;
  /* border: 1px solid #ebebeb; */
}
.category-card-item{
  width: 60px;
  height:35px;
  display: flex;
  justify-content: start;
  align-items: center;
  color: black;
  font-size: 0.897em;
  white-space: nowrap;
  border-radius: 5px;
  padding: 0 3px;
  margin-right: 5px;
  /* border: 1px solid #ebebeb; */
  transition: background-color 0.2s;

}
.category-card-item:hover{
  cursor: pointer;
  background-color: lightgray;
}


</style>